<template>
	<div class="little-components">
		<div class="mt-10">
			<lilo-icon-button class="mr-10" title="简单按钮"></lilo-icon-button>
			<lilo-icon-button class="mr-10"><span>我是一个插槽</span></lilo-icon-button>
			<lilo-icon-button
				class="mr-10"
				title="自定义按钮"
				:icon="{ type: 'el-icon-upload', color: '#f56c6c', size: '1rem' }"
				:font="{ color: '#5500ff', size: '1rem' }"
				@toggle="toggle"
			></lilo-icon-button>
			<lilo-icon-button class="mr-10" :showIcon="false"><span>不需要图标</span></lilo-icon-button>
		</div>
		<div class="mt-10">
			<lilo-icon-switcher class="mr-10" title="切换按钮"></lilo-icon-switcher>
			<lilo-icon-switcher class="mr-10"><span>我也是一个插槽</span></lilo-icon-switcher>
			<lilo-icon-switcher
				class="mr-10"
				title="自定义切换按钮"
				:icon="{ type: 'el-icon-loading', color: '#005500', size: '1rem' }"
				:font="{ color: '#5500ff', size: '1rem' }"
				:checked="true"
				@toggle="toggle"
			></lilo-icon-switcher>
			<lilo-icon-button class="mr-10" :showIcon="false"><span>不需要图标</span></lilo-icon-button>
		</div>
		<div class="mt-10"><lilo-clock class="clock" divider="-"></lilo-clock></div>
		<el-row :gutter="20" class="mt-10">
			<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12"><lilo-thounsand-input v-model="ceshiThounsandInput" :clearable="true"></lilo-thounsand-input></el-col>
			<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12"><lilo-thounsand-input :value="123456789" disabled></lilo-thounsand-input></el-col>
		</el-row>
		<div class="mt-10"><lilo-box-group :dataProvider="boxData" theme="blue" :col="6" @selected="boxGroupSelected"></lilo-box-group></div>
		<el-row :gutter="20" class="mt-10">
			<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
				<lilo-group-select :options="groupSelectOptions" @change="groupSelectChange" multiple clearable></lilo-group-select>
			</el-col>
			<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
				<lilo-group-select :options="groupSelectOptions2" @change="groupSelectChange" clearable></lilo-group-select>
			</el-col>
		</el-row>
		<el-row :gutter="20" class="mt-10">
			<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
				<lilo-org-navigation
					class="org-navigation"
					:theme="naviTheme"
					:loading="naviLoading"
					:orgcode="naviOrgcode"
					:deepLevel="naviDeepLevel"
					:drop-down="true"
					:excuteFunction="excute"
					@changed="locate"
				></lilo-org-navigation>
			</el-col>
			<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
				<el-upload action="https://jsonplaceholder.typicode.com/posts/" 
					list-type="picture-card" 
					:on-preview="handlePictureCardPreview" 
					:on-remove="handleRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
			</el-col>
		</el-row>
		<template v-if="preview">
			<el-image-viewer :z-index="9999" :initial-index="0" v-if="showViewer" :on-close="_closeViewer" :url-list="previewSrcList" />
		</template>
	</div>
</template>

<script>
// import mapx from '@/plugin/src/utils/mapUtils.js';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

let prevOverflow = '';

export default {
	components: {
		ElImageViewer
	},
	data() {
		return {
			ceshiThounsandInput: 123456789,
			naviTheme: 'light', //主题 dark,light
			naviLoading: true, //加载状态
			naviOrgcode: '420106', //默认code
			naviDeepLevel: 4, //可查询层级
			boxData: [
				{
					label: '初等教育',
					value: 12447,
					unit: '人',
					alias: '1.5%',
					// percent: 0.3,
					trend: -120,
					valueSize: 0.9,
					aliasSize: 0.7
				},
				{
					label: '中等教育',
					value: 579160,
					unit: '人',
					alias: '69.6%',
					percent: 5.8,
					valueSize: 0.9,
					aliasSize: 0.7
				},
				{
					label: '高等教育',
					value: 66622,
					unit: '人',
					alias: '8%',
					// percent: -8.6,
					trend: -86,
					valueSize: 0.9,
					aliasSize: 0.7
				},
				{
					label: '研究生教育',
					value: 3734,
					unit: '人',
					alias: '0.4%',
					// percent: -0.2,
					trend: 189,
					valueSize: 0.9,
					aliasSize: 0.7
				},
				{
					label: '有房',
					value: 459386,
					unit: '人',
					alias: '55.2%',
					percent: -5,
					valueSize: 1.2,
					aliasSize: 0.9
				},
				{
					label: '有车',
					value: 63210,
					unit: '人',
					alias: '7.6%',
					percent: -6.3,
					valueSize: 1.2,
					aliasSize: 0.9
				}
			],
			groupSelectOptions: [
				{
					id: 1,
					label: '热门城市',
					checked: false,
					isIndeterminate: false,
					options: [
						{
							value: 'Shanghai',
							label: '上海'
						},
						{
							value: 'Beijing',
							label: '北京'
						}
					]
				},
				{
					id: 2,
					label: '城市名',
					checked: false,
					isIndeterminate: false,
					options: [
						{
							value: 'Chengdu',
							label: '成都'
						},
						{
							value: 'Shenzhen',
							label: '深圳'
						},
						{
							value: 'Guangzhou',
							label: '广州'
						},
						{
							value: 'Dalian',
							label: '大连'
						},
						{
							value: 'Huizhou1',
							label: '惠州1'
						},
						{
							value: 'Huizhou2',
							label: '惠州2'
						},
						{
							value: 'Huizhou3',
							label: '惠州3'
						},
						{
							value: 'Huizhou4',
							label: '惠州4'
						},
						{
							value: 'Huizhou5',
							label: '惠州5'
						},
						{
							value: 'Huizhou6',
							label: '惠州6'
						}
					]
				}
			],
			groupSelectOptions2: [
				{
					id: 1,
					label: '超期',
					options: [
						{
							value: 'cqwbj',
							label: '超期未办结'
						},
						{
							value: 'ycq',
							label: '已超期'
						}
					]
				},
				{
					id: 2,
					label: '按天',
					options: [
						{
							value: 't1',
							label: '1天'
						},
						{
							value: 't2',
							label: '2天'
						},
						{
							value: 't3',
							label: '3天'
						},
						{
							value: 't4',
							label: '4天'
						},
						{
							value: 't5',
							label: '5天'
						},
						{
							value: 't6',
							label: '6天'
						},
						{
							value: 't7',
							label: '7天'
						},
						{
							value: 't8',
							label: '8天'
						},
						{
							value: 't9',
							label: '9天'
						}
					]
				},
				{
					id: 3,
					label: '按小时',
					options: [
						{
							value: 'h1',
							label: '1小时'
						},
						{
							value: 'h2',
							label: '2小时'
						},
						{
							value: 'h3',
							label: '3小时'
						},
						{
							value: 'h4',
							label: '4小时'
						},
						{
							value: 'h5',
							label: '5小时'
						},
						{
							value: 'h6',
							label: '6小时'
						},
						{
							value: 'h7',
							label: '7小时'
						},
						{
							value: 'h8',
							label: '8小时'
						},
						{
							value: 'h9',
							label: '9小时'
						}
					]
				}
			],
			showViewer: false,
			previewSrcList: []
		};
	},
	computed: {
		preview() {
			const { previewSrcList } = this;
			return Array.isArray(previewSrcList) && previewSrcList.length > 0;
		}
	},
	methods: {
		toggle(selected) {
			console.log(selected);
		},
		boxGroupSelected(val) {
			console.log(val);
		},
		locate(val) {
			console.log(val);
		},
		excute(currentCode, deep, returnGeometry) {
			// 封装的 arcgis QueryTask 快捷查询方法
			// return mapx.easyQuery(currentCode, {
			// 	deep: deep,
			// 	returnGeometry: returnGeometry,
			// 	orderByFields: mapx.getKeyByCode(currentCode, deep)
			// });
			//业务接口，异步请求
			return Promise.resolve()
		},
		groupSelectChange(val) {
			console.log(val);
		},
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePictureCardPreview(file) {
			console.log(file);
			this.previewSrcList = [file.url];
			// don't show viewer when preview is false
			if (!this.preview) {
				return;
			}
			// prevent body scroll
			prevOverflow = document.body.style.overflow;
			document.body.style.overflow = 'hidden';
			this.showViewer = true;
		},
		_closeViewer() {
			document.body.style.overflow = prevOverflow;
			this.showViewer = false;
		},
	}
};
</script>

<style lang="scss" scoped>
.little-components {
	padding: 20px;
	.clock {
		color: #001528;
		// font-family: 'technology';
		font-size: 2em;
		font-weight: bold;
	}
	.org-navigation {
		width: 470px;
	}
}
</style>